<template>
  <div class="divBox relative">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container mt-1">
          <el-form inline size="small">
			<div class="flex items-center search_form">
				<div>
					批次：
					<el-input
					v-model="searchForm.bath"
					placeholder="请输入批次"
					style="width: 200px; margin-right: 10px;"
					size="small"
					></el-input>
				</div>
				<!-- <div>
					状态：
					<el-select  size="small" v-model="searchForm.status" placeholder="请选择状态" style="width: 120px;margin-right: 10px;">
					  <el-option label="不限" value="-1"></el-option>
					  <el-option label="已使用" value="1"></el-option>
					  <el-option label="未使用" value="0"></el-option>
					</el-select>
				</div> -->
				<!-- <div>
					添加时间：
					<el-date-picker
					v-model="time"
					type="daterange"
					value-format="yyyy-MM-dd"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					style=" margin-right: 10px;"
					size="small"
					></el-date-picker>
				</div> -->
				<div>
					<el-button type="primary" size="mini" @click="mySearch">搜索</el-button>
					<el-button size="mini" @click="reset">重置</el-button>
				</div>
				
				 
			</div>
            
			
          </el-form>
		 <br> 
		  <div style="margin-left: 10px;">
			<el-button type="primary" size="mini" @click="addBtn">新增</el-button>
			<el-button type="success" size="mini" @click="downLode">导出</el-button>
		  </div>
        </div>
      </div>
	  <!-- <el-checkbox v-model="checked" @change="changeChecked" style="position: absolute;top: 95px;left: 30px;"></el-checkbox> -->
      <el-table
          :data="list"
          style="width: 100%"
		  size="mini"
		  height="600px"
		  :highlight-current-row="true"
		  :header-cell-style=" {fontWeight:'bold'}"
          row-key="qr_sn"
          lazy
          :load="load"
		  @selection-change="handleSelectionChange"
          :tree-props="{children: 'list', hasChildren: 'hasChildren'}">
		  <!-- <el-table-column
		        type="selection"
				v-slot="{row, rowIndex}"
		        width="55" >
				<template v-if="shouldShowCheckbox(row)">
				    <el-checkbox :value="row.checked" @change="handleCheckboxChange(row)"></el-checkbox>
				</template>
		  </el-table-column> -->
		  <el-table-column
		    prop="id"
		    label="ID">
		  </el-table-column>
		  <el-table-column
		    prop="bath"
		    label="批次"
		  	align="center">
		  </el-table-column>
          <el-table-column
            prop="add_time"
            label="添加时间"
			align="center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="状态"
			align="center">
			<template slot-scope="scope">
				<el-tag
					size="small"
					v-if="scope.row.status==1"
				    effect="dark">
				    已使用
				  </el-tag>
				  <el-tag
					  size="small"
					  v-if="scope.row.status==0"
					  type="danger"
				      effect="dark">
				      未使用
				    </el-tag>
			</template>
          </el-table-column>
		  <el-table-column
		    prop="goods_name"
		    label="商品名称"
		  	align="center">
		  </el-table-column>
          <el-table-column
			align="center"
            label="二维码">
			<template slot-scope="scope">
				<img src="@/assets/img/qrcode.png" 
					@click="showQrCode(scope.row)"
					style="width: 20px;cursor: pointer;" alt="">
			</template>
          </el-table-column>
		  <el-table-column
		    prop="qr_sn"
			width="300px"
		    label="二维码编号"
		  	align="center">
		  </el-table-column>
		  <!-- <el-table-column
		    prop="a_name"
			width="300px"
		    label="奖品名称"
		  	align="center">
		  </el-table-column> -->
		  <el-table-column
		  			align="center"
					fixed="right"
					width="200px"
					label="操作">
				<template slot-scope="scope">
					<!-- <el-button @click="bindaward(scope.row)"
					 v-if="scope.row.pid!=0"	
					 type="text">绑定奖品</el-button> -->
					 <div class="flex" style="justify-content: center;">
						<el-select v-model="scope.row.aid" 
							@change="bindPrizeConfirm(scope.row)"
						  v-if="scope.row.pid!=0"	
						  size="small" placeholder="内定奖品">
		  		  	      <el-option
		  		  	        v-for="item in options"
		  		  	        :key="item.id"
		  		  	        :label="item.name"
		  		  	        :value="item.id">
		  		  	      </el-option>
		  		  	    </el-select>
						<el-button @click="delRow(scope.row.id)" type="text">删除</el-button>
					 </div>
					
				</template>
		  </el-table-column>
        </el-table>
	  <div class="page">
	              <el-pagination
	                      background
	                      @size-change="pageChange"
	                      @current-change="handleCurrentChange"
	                      :current-page="page"
	                      :page-size="pageSize"
	                      layout="total, sizes, prev, pager, next, jumper"
	                      :total="page_totle">
	              </el-pagination>
	          </div>
    </el-card>
	
	<!-- 新增角色 -->
	<el-dialog
	  :title="title"
	  :visible.sync="formShow"
	  :close-on-click-modal="false"
	  width="500px">
	  <el-form ref="form" :model="form" label-width="120px">
		  <el-form-item label="商品">
		  		  	  <el-select v-model="form.goods_id"   size="small" placeholder="请选择">
		  		  	      <el-option
		  		  	        v-for="item in goodsList"
		  		  	        :key="item.id"
		  		  	        :label="item.goods_name"
		  		  	        :value="item.id">
		  		  	      </el-option>
		  		  	    </el-select>
		  </el-form-item>
		  <el-form-item label="批次">
				<div class="flex"> 
					第 <el-input style="width: 200px;" v-model="form.bath" size="small" type="number"></el-input> 批次
				</div>
		  </el-form-item>
		  <el-form-item label="箱码数量">
		  		<el-input v-model="form.number" size="small" type="number"></el-input>  	
		  </el-form-item>
		  <el-form-item label="箱体商品数量">
		  		<el-input v-model="form.num" size="small" type="number"></el-input>  	
		  </el-form-item>
	  </el-form>
	  <span slot="footer" class="dialog-footer">
	    <el-button size="mini" @click="formShow = false">取 消</el-button>
	    <el-button size="mini" type="primary" @click="confirm">确 定</el-button>
	  </span>
	</el-dialog>
	<el-dialog
	  v-if="isShow"
	  title="二维码"
	  :visible.sync="isShow"
	  :close-on-click-modal="false"
	  width="300px">
	  <div id="qrcode" style="text-align: center;">
	  		  
	  </div>
	</el-dialog>
	<el-dialog
	  title="内定奖品"
	  :visible.sync="isShowPrize"
	  :close-on-click-modal="false"
	  width="600px">
		<el-form ref="form" :model="form" label-width="120px">
			<el-form-item label="奖品">
		  		  	  <el-select v-model="form.aid"   size="small" placeholder="请选择">
		  		  	      <el-option
		  		  	        v-for="item in options"
		  		  	        :key="item.id"
		  		  	        :label="item.name"
		  		  	        :value="item.id">
		  		  	      </el-option>
		  		  	    </el-select>
			</el-form-item>
			<el-form-item label="">
				<el-button type="primary" size="mini" @click="bindPrizeConfirm">确定</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
  </div>
</template>
<script>
	import QRCode from 'qrcode2'
  export default {
    data() {
      return {
		isShowPrize:false,
        title:'新增',
		isShow:false,
		form:{
			id:null,
			goods_id:"",
			number:"1",
			num:'6',
			bath:""
		},
		list:[],
		page:1,
		pageSize:10,
		goodsList:[],
		isShow:false,
		checked:false,
		selectId:[],
		searchForm:{
			bath:"",
			status:"-1"
		},
		time:[],
		options:[],
		form:{
			aid:''
		},
		qrcode_id:'',
      }
    },
	// 监听list中的checked变化
	watch: {
        list: {
          handler(newVal, oldVal) {
            // 处理 checked 变化的逻辑
			// 如果所有项都被选中并且pid为0，那么 checked 也应该为 true
			
			if(newVal.every(item => item.checked)){
				this.checked = true
			}else{
				this.checked = false
			}
			if(newVal.length == 0) this.checked = false
			// 处理 selectId 变化的逻辑
			this.selectId = newVal.filter(item => item.checked).map(item => item.id)
          },
          deep: true // 深度监听，当 checked 是一个对象时生效
        }
      },
    mounted() {
      this.lodeList()
	  this.getPrizeList()
	  
    },
    methods: {
		bindPrizeConfirm(row){
			let params = {
				id:row.id,
				aid:row.aid
			}
			this.$api.post('/admin/setInnerAward',params).then(res=>{
				if(res.code==200){
						this.$message.success('设置成功')
						this.isShowPrize = false
						this.lodeList()
				}
				
		  })
		},
		//获取奖品列表
        getPrizeList(){
				 
		  this.$api.post('/admin/getPrizeList',{searchForm:{}}).then(res=>{
			  let data = res.data
             this.options = data.result
		  })
		},
		bindaward(row){
			this.form.aid = row.aid
			this.qrcode_id = row.id
			this.isShowPrize = true
		},
		downLode(){
			var bath
			if(this.searchForm.bath){
			bath = '&bath=' + this.searchForm.bath
			}else{
			bath = '&bath='
			}
				

			let url =  `${this.$domain}/excel/exportData?selectId=1${bath}`
			location.href = url
		},
		// downLode(){
		// 	if(this.selectId.length==0) return this.$message.error('请选择导出的数据')
		// 	let selectId = this.selectId.join(',')
		
		// 	let url =  `${this.$domain}/qrZipController/export?selectId=${selectId}`
		// 	location.href = url
		// },
		changeChecked(){
			console.log(this.checked)
			if(this.checked){
				for(let item of this.list){
					item.checked = true
				}
			}else{
				for(let item of this.list){
					item.checked = false
				}
			}
		},
		shouldShowCheckbox(row) {
		    // 例如，只有当某行的某个属性（如 isVisible）为 true 时才显示复选框
		    return row.isVisible;
		  },
		  handleCheckboxChange(row) {
		    // 处理复选框变化的事件
		    row.checked = !row.checked; // 更新行的 checked 状态
			
		  },
		handleSelectionChange(row){
			console.log(row)
		},
		showQrCode(row){
			console.log(row)
			
			let url = `${this.$baseUrl}/qrcode/?id=${row.qr_sn}`
			this.isShow = true
			setTimeout(()=>{
				var qrcodeContainer = document.getElementById('qrcode');
				if (qrcodeContainer) {
				    new QRCode(qrcodeContainer, url);
				} else {
				    console.error('二维码容器未找到');
				}
			},500)
			
			
		},
		load(tree, treeNode, resolve){
			for(let item of tree.list){
				item.goods_name = tree.goods_name
			}
			resolve(tree.list)
		},
		lodeGoods(){
				 
		  this.$api.post('/admin/getGoodsList',{}).then(res=>{
			  let data = res.data
			  this.goodsList = data.result
		  })
		},
		
		
		editRow(row){
			this.addTitle = '编辑'
			for(let i in this.form){
				this.form[i] = row[i]
			}
			this.formShow = true
		
		},
		addBtn(){
			this.formShow = true
			this.form = {
				id:null,
				goods_id:"",
				number:"1",
				num:'6',
				bath:""
			}
		},
		confirm(){
				this.$api.post('/admin/addQrCode',this.form).then(res=>{
					//   if(res.code==200){
					  	this.$message.success('操作成功')
					  	this.formShow = false
					  	this.lodeList()
					//   }
				})
		},
		delRow(id){
			this.$confirm('确定删除', '提示', {
					  confirmButtonText: '确定',
					  cancelButtonText: '取消',
					  type: 'warning'
					}).then(() => {
						let params = {
							dd:{id}
						}
					  this.$api.post('/admin/delQrCode',params).then(res=>{
					  	  if(res.code==200){
					  	  	this.lodeList()
					  	  }
					  })
			  })
	   },
	   reset(){
			this.searchForm = {
				bath:"",
				status:"-1"
			}
			this.time = []
			this.lodeList()
	   },
      lodeList(){
			if(this.time.length==2){
				this.searchForm.start_time = this.time[0]
				this.searchForm.end_time = this.time[1]
			}
		  let params = {
		          	page:this.page,
		          	pageSize:this.pageSize,
					searchForm:this.searchForm
		    }
		 
		  this.$api.post('/admin/getQrcodeList',params).then(res=>{
			  let data = res.data
			  this.page_totle = data.count
			  for(let item of data.result){
				  item.isVisible = true
				  item.checked = false
				  for(let ele of item.list){
					  ele.isVisible = false
				  }
			  }
			  this.list = data.result
		  })
	  }
      
    }
  }
</script>
<style>
	.el-table__header-wrapper .el-checkbox {
	  display: none;
	}
</style>

